<template>
  <view class="detail-wrap">
		<back :backTitle="backTitle" class="back"></back>
    <view class="detail-container">
      <view v-for="(item, index) of detailPart" :key="index" class="detail-item">
        <image :src="item.icon"></image>
        <view class="title">{{ item.title }}</view>
        <view class="desc">{{ item.desc }}</view>
      </view>
      <view class="detail-item-last">
        <image class="icon" src="/static/images/work/work.png"></image>
        <view class="mid-info">
          <view class="title-wrap">
            <view class="left-title">布置作业：</view>
            <image v-if="info.ifParentAutograph === 2" :animation="animationData" src="/static/images/common/parent.png"></image>
          </view>
          <view class="desc">{{info.taskContent}}</view>
          <previewImg v-if="dataList" :list="dataList" :width="width" :height="height" class="preview-image"></previewImg>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import previewImg from '@/components/preview/index'
export default {
  data() {
    return {
      backTitle: '作业详情',
      detailPart: [
        {
          icon: '/static/images/work/publish.png',
          title: '发布时间：',
          desc: '2018-09-19  17：40',
        },
        {
          icon: '/static/images/work/end.png',
          title: '完成时间：',
          desc: '2018-09-19  17：40',
        },
        {
          icon: '/static/images/work/project.png',
          title: '科目：',
          desc: '语文',
        }
      ],
      animationData: {},
      dataList: null,
			width: 186,
      height: 184,
      info: {}
    }
  },
  components: {
    previewImg
  },
	onLoad(options) {
		this.initDataList(options.params)
  },
  onShow() {
    this.initAnimation()
  },
  methods: {
    initDataList(params) {
      this.info = JSON.parse(params)
      this.detailPart[0].desc = this.info.taskTiming
      this.detailPart[1].desc = this.info.taskEndTime
      this.detailPart[2].desc = this.info.dictName
      this.dataList = this.info.taskPhoto
    },
    initAnimation() {
      const animation = uni.createAnimation({
        transformOrigin: "50% 50%",
        duration: 500,
        timingFunction: "ease",
        delay: 0
      })
      animation.translateX(0).opacity(1).step()
      this.animationData = animation.export()
    }
  }
}

</script>
<style lang='scss' scoped>
.detail-wrap{
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  .back{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .detail-container{
    padding: 175upx 20upx 0;
    box-sizing: border-box;
    .detail-item{
      margin-bottom: 40upx;
      width:100%;
      height:92upx;
      border:2upx solid rgba(225,225,225,1);
      border-radius:46upx;
      display: flex;
      align-items: center;
      font-size: 30upx;
      letter-spacing: 2upx;
      image{
        margin-right: 20rpx;
        margin-left: 26upx;
      }
      .title{
        font-size: 30upx;
        letter-spacing: 2upx;
        color: #999999;
      }
      .desc{
        font-size: 30upx;
        letter-spacing: 2upx;
        color: #333;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      &:nth-of-type(1) {
        image{
          width:46upx;
          height:46upx;
        }
      }
      &:nth-of-type(2) {
        image{
          width:40upx;
          height:44upx;
        }
      }
      &:nth-of-type(3) {
        image{
          width:40upx;
          height:40upx;
        }
      }
    }
    .detail-item-last{
      width: 100%;
      border:2upx solid rgba(225,225,225,1);
      border-radius:46upx;
      padding: 20upx 32upx 42upx 26upx;
      box-sizing: border-box;
      display: flex;
      .icon{
        width:40upx;
        height:46upx;
        margin-right: 20upx;
      }
      .mid-info{
        flex: 1;
        .title-wrap{
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-bottom: 20upx;
          .left-title{
            font-size: 30upx;
            color: #999;
          }
          image{
            width: 175upx;
            height: 50upx;
            transform: translateX(200upx);
            /* transition: all .3s; */
            opacity: 0;
          }
        }
        .desc{
          font-size: 30upx;
          line-height: 34upx;
          color: #333;
          width: 100%;
          margin-bottom: 24upx;
        } 
      }
    }
  }
}
</style>